<template>
  <div class="GykjMap-dikeEngineering">
    <div class="GykjMap-dikeEngineering-tabs">
      <Tabs type="card" v-model="activeTab" :animated="false">
        <TabPane label="基本情况" name="info"></TabPane>
        <TabPane label="非工程措施" name="measures"></TabPane>
      </Tabs>
    </div>
    <div class="GykjMap-dikeEngineering-content">
      <div class="GykjMap-dikeEngineering-table" v-show="activeTab === 'info'">
        <div>
          <BaseTitle title="基本信息" height="24px" fontSize="14px"></BaseTitle>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key">工程名称</td>
                <td colspan="3">{{fliterData('工程名称')}}</td>
              </tr>
              <tr>
                <td class="key">所在河道</td>
                <td>{{fliterData('所在河道')}}</td>
                <td class="key">所在堤围</td>
                <td>{{fliterData('name')}}</td>
              </tr>
              <tr>
                <td class="key">地理位置</td>
                <td>{{fliterData('地理位置')}}</td>
                <td class="key">桩号</td>
                <td>{{fliterData('桩号')}}</td>
              </tr>
              <tr>
                <td class="key">施工许可证批准文号</td>
                <td colspan="3">{{fliterData('施工许可证批准文号')}}</td>
              </tr>
              <tr>
                <td class="key">施工单位</td>
                <td>{{fliterData('施工单位')}}</td>
                <td class="key">监理单位</td>
                <td>{{fliterData('监理单位')}}</td>
              </tr>
              <tr>
                <td class="key">开工日期</td>
                <td>{{fliterData('开工日期')}}</td>
                <td class="key">施工工期(天)</td>
                <td>{{fliterData('施工工期(天)')}}</td>
              </tr>
              <tr>
                <td class="key">建设单位</td>
                <td>{{fliterData('建设单位')}}</td>
                <td class="key">行业归口部门</td>
                <td>{{fliterData('行业归口部门')}}</td>
              </tr>
              <tr>
                <td class="key">工程性质</td>
                <td>{{fliterData('工程性质')}}</td>
                <td class="key">破堤施工情况</td>
                <td>{{fliterData('破堤施工情况')}}</td>
              </tr>
              <tr>
                <td class="key">复堤时间</td>
                <td colspan="3">{{fliterData('复堤时间')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div style="margin-top: 10px;">
          <BaseTitle title="防洪评价" height="24px" fontSize="14px"></BaseTitle>

          <table class="table" border>
            <tbody>
              <tr>
                <td colspan="2" class="key">是否进行过防洪评价</td>
                <td colspan="4">{{fliterDouData('防洪评价.是否进行过防洪评价')}}</td>
              </tr>
              <tr>
                <td class="key">时间</td>
                <td>{{fliterDouData('防洪评价.时间')}}</td>
                <td class="key">主要结论</td>
                <td>{{fliterDouData('防洪评价.主要结论')}}</td>
                <td class="key">补救措施落实情况</td>
                <td>{{fliterDouData('防洪评价.补救措施落实情况')}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="GykjMap-dikeEngineering-table" v-show="activeTab === 'measures'">

        <div>
          <BaseTitle title="防汛责任制" height="24px" fontSize="14px"></BaseTitle>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key"></td>
                <td class="center">防汛行政责任人</td>
                <td class="center">防汛技术责任人</td>
                <td class="center">管理单位负责人</td>
              </tr>
              <tr>
                <td class="key">姓名</td>
                <td class="center">{{fliterDouData('防汛行政责任人.姓名')}}</td>
                <td class="center">{{fliterDouData('防汛技术责任人.姓名')}}</td>
                <td class="center">{{fliterDouData('管理单位负责人.姓名')}}</td>
              </tr>
              <tr>
                <td class="key">单位</td>
                <td class="center">{{fliterDouData('防汛行政责任人.单位')}}</td>
                <td class="center">{{fliterDouData('防汛技术责任人.单位')}}</td>
                <td class="center">{{fliterDouData('管理单位负责人.单位')}}</td>
              </tr>
              <tr>
                <td class="key">职务</td>
                <td class="center">{{fliterDouData('防汛行政责任人.职务')}}</td>
                <td class="center">{{fliterDouData('防汛技术责任人.职务')}}</td>
                <td class="center">{{fliterDouData('管理单位负责人.职务')}}</td>
              </tr>
              <tr>
                <td class="key">电话</td>
                <td class="center">{{fliterDouData('防汛行政责任人.电话')}}</td>
                <td class="center">{{fliterDouData('防汛技术责任人.电话')}}</td>
                <td class="center">{{fliterDouData('管理单位负责人.电话')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div style="margin: 10px 0;">
          <BaseTitle title="应急预案" height="24px" fontSize="14px"></BaseTitle>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key center">1</td>
                <td class="center" width="140">防风预案</td>
                <td class="key center">是否编制</td>
                <td class="center">{{fliterData('防洪预案是否编制')}}</td>
              </tr>
              <tr>
                <td class="key center">2</td>
                <td class="center" width="140">群众转移方案</td>
                <td class="key center">是否编制</td>
                <td class="center">{{fliterData('群众转移方案是否编制')}}</td>
              </tr>
              <tr>
                <td class="key center">3</td>
                <td class="center" width="140">其他相关预案(名称)</td>
                <td class="center" colspan="2">{{fliterData('其他相关预案(名称)')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div>
          <BaseTitle title="应急抢险" height="24px" fontSize="14px"></BaseTitle>

          <table class="table" border>
            <tbody>
              <tr>
                <td class="key center" rowspan="3">抢险队伍</td>
                <td class="key center" rowspan="2">人数（人）</td>
                <td class="center" colspan="2">负责人</td>
                <td class="center" colspan="2">联系人</td>
              </tr>
              <tr>
                <td class="center">姓名</td>
                <td class="center">电话</td>
                <td class="center">姓名</td>
                <td class="center">电话</td>
              </tr>
              <tr>
                <td class="center">{{fliterDouData('抢险队伍.人数（人）')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.负责人姓名')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.负责人电话 ')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.联系人姓名')}}</td>
                <td class="center">{{fliterDouData('抢险队伍.联系人电话')}}</td>
              </tr>

              <tr>
                <td class="key center" rowspan="3">防汛抢险物资储备现状情况</td>
                <td class="center">袋类（条）</td>
                <td class="center">土工布(m²)</td>
                <td class="center">砂石(m³)</td>
                <td class="center">块石(m³)</td>
                <td class="center">救生衣(件)</td>
              </tr>
              <tr>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.袋类（条）')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.土工布（m²）')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.砂石(m³)')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.块石（m³）')}}</td>
                <td class="center">{{fliterDouData('防汛抢险物资储备现状情况.救生衣(件)')}}</td>
              </tr>
              <tr>
                <td class="key">存放点与工程距离(m)</td>
                <td class="center" colspan="4">{{fliterDouData('防汛抢险物资储备现状情况.存放点与工程距离（m）')}}</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import BaseTitle from '../../public/base-title/base-title'

export default {
  props: {
    isInit: {
      type: Boolean,
      default: true
    }
  },
  components: {
    BaseTitle
  },
  mounted () {
    if (this.isInit) {
      this.initData()
    }
  },
  data () {
    return {
      resultData: {},
      activeTab: 'info'
    }
  },
  methods: {
    fliterData (key) {
      if (this.resultData[key] === 0) {
        return this.resultData[key]
      }
      return this.resultData[key] || '--'
    },
    fliterDouData (key) {
      const arr = key.split('.')

      if (this.resultData[arr[0]] === undefined) {
        this.resultData[arr[0]] = {}
      }

      return this.resultData[arr[0]][arr[1]] || '--'
    },
    initData (data = {}) {
      this.resultData = data
      this.activeTab = 'info'
    }
  }
}
</script>

<style lang="scss" scoped>
.GykjMap-dikeEngineering {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  .GykjMap-dikeEngineering-tabs {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
  }
  .GykjMap-dikeEngineering-content {
    position: absolute;
    left: 5px;
    right: 0;
    top: 40px;
    bottom: 5px;
    overflow: auto;
    .GykjMap-dikeEngineering-table {
      width: 100%;
      height: 100%;
      .table {
        width: 100%;
        margin: auto;
        font-size: 14px;
        border: 1px solid #ddd;
        margin: 5px 0;
        td {
          padding: 5px;
          &.key {
            width: 100px;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
